<template>
  <div class="hotSon">
    <NavBar></NavBar>
    <div class="father">
      <div class="bg_container">
        <div class="bg_box">
          <div class="bg_box_box">
            <div class="bg">
            </div>
            <div class="logoBox" ref="hotTime">
              更新日期: {{timer}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <template v-if="smallhotList.length>0">
      <div @click="jumpSongs(item.id)" class="box" v-for="(item,index) in smallhotList" :key="index">
        <MusicList :musicList='item'><span :class="{thirds:index<3}" class="hot_slot">{{index&lt;9?'0'+(index+1):index+1}}</span></MusicList>
      </div>
    </template>
    <MusicLoading v-else></MusicLoading>
    <div v-show="addPage.length>0" class="more" @click="loadMore">{{page>=hotList.length/pageSize?"我是有底线的(●'◡'●)":"点击加载更多"}}</div>
  </div>
</template>
<style lang="less" scoped>
.hotSon {
  padding-bottom: 70px;
}
.more {
  text-align: center;
  line-height: 40px;
  font-size: 13px;
  color: #666;
}
.father {
  margin-bottom: 10px;
}
.bg_box_box {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding-left: 20px;
}
.bg_box {
  position: relative;
  padding-top: 38.9%;
  overflow: hidden;
  background: url(//s3.music.126.net/mobile-new/img/hot_music_bg_2x.jpg?f01a252…=) no-repeat;
  background-size: contain;
}
.bg {
  content: '';
  width: 147px;
  height: 81px;
  background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=) no-repeat;
  background-position: -23px -29px;
  background-size: 170px;
}

.bg_container {
  width: 100%;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.thirds {
  color: rgb(223, 52, 112);
}
.hot_slot {
  // position: absolute;
  // left: -20px;
  // top: 12px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  padding-bottom: 10px;
  position: relative;
  // padding-left: 10px;
}
.hotSon {
  // padding-left: 30px;
  // padding-top: 30px;
  position: relative;
}
.logoBox {
  font-size: 12px;
  color: rgb(238, 224, 221);
  font-family: Arial, Helvetica, sans-serif;

  // padding-top: 95px;
  // padding-bottom: 65px;
}
</style>
<script>
import MusicList from '@/components/MusicList.vue';
import MusicLoading from '@/components/MusicLoading.vue';

export default {
  name: 'hotSon',
  components: {
    MusicList,
    MusicLoading
  },
  data() {
    return {
      playlist: [],
      hotList: [],
      page: 1,
      pageSize: 30,
      smallhotList: []
    };
  },

  methods: {
    jumpSongs(ids) {
      let currentSongIndex = this.playlist.findIndex(val => {
        return val.id == ids;
      });
      let currentObj = { currentSongIndex: currentSongIndex, newAllList: this.playlist };
      //显示播放器
      this.$store.commit('showPlayBox', true);
      this.$store.commit('setSongsObject', currentObj);
    },
    loadMore() {
      if (this.page >= this.hotList.length / this.pageSize) {
        alert('没有更多了');
        return;
      }
      this.page++; //下一页
      this.smallhotList = this.hotList.slice(0, this.pageSize * this.page);
    },
    async getHotList() {
      const { data: res } = await this.$http.get('/playlist/detail?id=3778678');
      this.playlist = res.playlist.tracks.map((value, index) => {
        value.song = {
          alias: [res.playlist.tracks[index].alia[0]],
          artists: [res.playlist.tracks[index].ar[0].name]
        };
        return value;
      });
      this.hotList = res.playlist.tracks.map((value, index) => {
        value.song = {
          name: value.name,
          artists: [value.ar[0]],
          alia: value.alia[0],
          album: value.al,
          privilege: res.privileges[index]
        };
        return value;
      });
      this.smallhotList = this.hotList.slice(0, this.pageSize * this.page);
    }
  },
  created() {
    this.getHotList();
  },
  computed: {
    addPage() {
      //计算属性依赖于 page  和 hotSong
      return this.hotList.slice(0, this.pageSize * this.page);
    },
    timer() {
      let timer = new Date();
      let month = timer.getMonth() < 10 ? '0' + (timer.getMonth() + 1) : timer.getMonth() + 1;
      let day = timer.getDate() < 10 ? '0' + timer.getDate() : timer.getDate();
      timer = `${month}月${day}日`;
      return timer;
    }
  }
};
</script>
